<template>
  <el-dialog title="编辑"  :close-on-click-modal="false" 
  :visible.sync="show" class="dialog_index"
   :before-close="cancle">
      <el-form ref="editForm" v-loading="loading" class="article_type_form" :rules="rules" :model="form">
        <el-form-item label="标签类型：" prop="tag_type">
          <el-input  :placeholder="'标签类型（必填项)'" v-model="form.tag_type"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="search" @click="submitForm">保存</el-button>
        <el-button @click="cancle">取消</el-button>
      </span>
  </el-dialog>
  
</template>

<script>
import { articleTagTypeEditGet, articleTagTypeEditPost } from '@/api/article/article_tag_type.js'

export default {
  data () {
    return  {
      loading: false,
      form: {
        tag_type: '',
      },
      rules:{
        tag_type:[
          { required: true, message: '字段标签类型为必填项', trigger: 'blur' },
          { min: 1, max: 50, message: '字段标签类型最多50字符', trigger: 'blur' }
        ],
      }
    }
  },
  props: {
    show: Boolean,
    closeDialog:Function,
    id: Number
  },
  watch: {
    show:function(){
      if(this.show){
        this.loading = true
        this.getArticleTagType()
      }
    }
  },
  methods: {
    getArticleTagType () {
      // 获取产品
      this.loading = true
      let params = {
        id: this.id
      }
      articleTagTypeEditGet(params).then(res=>{
        this.form = res.data
        this.loading = false
      })
       
    },
    editArticleTagType () {
      let params = this.form
      articleTagTypeEditPost(params).then(res=>{
        if(res.state == 1){
          this.$message.success('保存成功')   
          this.cancle()
        }
      })
    },
    submitForm () {
      this.$refs.editForm.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.editArticleTagType()
        }
      })
    },
      cancle(){
      // this.$refs.addSiteFrom.clearValidate();
      this.$refs.editForm.resetFields(); // 清空原来的数据
      this.$emit('closeDialog')

    },
  }
}
</script>

<style>

</style>